<template>
	<view class="order">
		<view style="width: 750rpx;height: 20rpx;"></view>
		<view class="order-mation_address">
			<view class="address" @click="diycity">
				<view class="address_left">
					<image class="dingwei" :src=" baseUrl + '/static/user/dingwei.png'"></image>
					<view class="address_text">
						<text v-if="cityList == '' || cityList==null">您还没有收货地址，去添加收货地址~</text>
						<text style="color: #999999;font-size: 30rpx;" v-if="cityList">{{ cityList.name }} &nbsp;&nbsp;&nbsp;{{ cityList.mobile }}</text>
						<text style="color: #333333;font-size: 28rpx;" v-if="cityList">
							{{ cityList.province }}{{ cityList.city }}{{ cityList.district }}{{ cityList.detail }}
						</text>
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="order-store"  v-if="minlist.prize_list">
			<view class="order-store-cent" v-for="(item, i) in minlist.prize_list" :key="i">
				<view class="order-list" >
					<view class="order-list-left">
						<image :src="item.prize_icon" mode="aspectFill"></image>
						<view>
							<view class="ordertext1">{{item.prize_name}}</view>
							<view class="ordertext2">
								<view class="left">价值：￥{{ item.price }}</view>
								<view class="right">
									<text></text>
									<text>x{{item.num}}</text>
								</view>
							</view>
						
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-mationyun">
			<text>运费</text>
			<text v-if="minlist.freight <= 0"></text>
			<text v-else>￥{{minlist.freight}}</text>
		</view>
		<view class="wenxin flex-a-c">
			<text class="size-24" style="color: #666;">温馨提示:</text>
			<text class="size-24" style="color: #666;margin-left: 20rpx;">商品在不同仓库时，发货可能会存在多个物流订单哦~</text>
		</view>
		<view class="order-mation3">
			<view class="om-top"><text>支付方式</text></view>
			<view class="order-con">
				<view @click="zfClick(1)" v-if="walletData.weixin_pay_status=='on'">
					<view>
						<image :src=" baseUrl + '/static/user/lchecks.png'" v-if="zfck == 1"></image>
						<image :src=" baseUrl + '/static/user/lcheck.png'" v-else></image>
						<text>微信支付</text>
					</view>
				</view>
				<!-- #ifndef  MP-WEIXIN -->
					<view @click="zfClick(2)" v-if="walletData.alipay_status=='on'">
						<view>
							<image :src=" baseUrl + '/static/user/lchecks.png'" v-if="zfck == 2"></image>
							<image :src=" baseUrl + '/static/user/lcheck.png'" v-else></image>
							<text>支付宝支付</text>
						</view>
					</view>
					<!-- <view @click="zfClick(3)" v-if="walletData.yuanshi_pay_status=='on'">
						<view>
							<image src="/static/user/lchecks.png" v-if="zfck == 3"></image>
							<image src="/static/user/lcheck.png" v-else></image>
							<text>大王币</text>
						</view>
					</view> -->
					<view @click="zfClick(4)" v-if="walletData.jd_pay_status=='on'">
						<view>
							<image :src=" baseUrl + '/static/user/lchecks.png'" v-if="zfck == 4"></image>
							<image :src=" baseUrl + '/static/user/lcheck.png'" v-else></image>
							<text>京东支付</text>
						</view>
					</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="tab_xieyi">
			<image :src=" baseUrl + '/static/user/lcheck.png'" v-if="checkStatus==false" @click="goCheck"></image>
			<image :src=" baseUrl + '/static/user/lchecks.png'" v-else @click="goCheck"></image>
			<text class="" @click="goCheck" >
				已阅读并同意</text><text style="color: #6792DD;z-index: 99999999;"  @click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
			
		</view>
		<view class="shuoming" >
			<view class="" v-html="">
				<!-- wencontent -->
			</view>
		</view>
		<view class="btns">
				<view v-if="minlist.freight<=0">
					<text class="zongjia">运费:</text>
				</view>
				<view v-if="minlist.freight>0">
					<text class="zongjia">运费: ￥{{ minlist.freight }}</text>
				</view>
				<view class="odpon" @click="uploadorder"><text>立即结算</text></view>
		</view>
		<u-popup mode="center" v-model="urlpayStatus">
			<view class="webcenter">
				<!-- <web-view  :src="payurl" style="width: 400rpx;height: 400rpx;"></web-view> -->
				结算
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			payurl:"",
			order_id:"",
			getjieguodingshi:null,
			urlpayStatus:false,
			chajia:"",
			value:1,
			minlist: {
				prize_list:{
					attr_group_list:[]
				},
			},
			cityList: {},
			remark: '',
			name:"",
			mobile:"",
			page:1,
			baseUrl : this.$configs.urls,
			zfck:1,
			pay_type:1,//支付方式1微信2支付宝3余额
			idlist:[],
			mySpecifications:{},
			walletData:{},//余额
			create_order_id:0,
			checkStatus:false,//协议
			wencontent:""
		};
	},
	onShow() {
		uni.$on('changedz', res => {
			this.cityList = res.local;
			this.cityList.address_id = res.local.id
		});
		this.wenzhanglist();
	},
	onLoad(option) {
		this.order_id = option.order_id
		this.getwallet()//钱包
		this.arrData();
	},
	methods: {
		goUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		goCheck(){
			this.checkStatus = !this.checkStatus
		},
		wenzhanglist(){
			let data = {
				id:7
			}
			this.$Request.get(this.$api.index.wenzhang,data).then(res => {
				this.wencontent = res.data.content
			});
		},
		getjieguo(){
			let data = {
				order_id:this.order_id
			}
			this.$Request.get(this.$api.index.payResult,data).then(res => {
				if(res.data.is_pay==1){
					clearInterval(this.getjieguodingshi)
					this.urlpayStatus = false;
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},800)
					 clearTimeout();
				}
			});
		},
		getwallet(){
			this.$Request.get(this.$api.user.wallet).then(res => {
				this.walletData = res.data
				if(res.data.weixin_pay_status=='on'){
					this.zfck = 1
					return;
				}
				if(res.data.alipay_status=='on'){
					this.zfck = 2
					return;
				}
				// if(res.data.yuanshi_pay_status=='on'){
				// 	this.zfck = 3
				// 	return;
				// }
				if(res.data.jd_pay_status=='on'){
					this.zfck = 4
					return;
				}
			});
		},
		// initSkuData() {
		// 	////console.log(this.minlist)
		// 	this.mySpecifications = this.minlist.prize_list.attr_group_list;
		// 	var guige = [];
		// 	this.idlist = [];
		// 	this.mySpecifications.forEach((item, idx) => {
		// 		//默认第一个
		// 		item.attr_list.forEach((item3, idx3) => {
		// 			if(idx3==0){
		// 				this.$set(item3, 'selected', true);
		// 			}
		// 		})
		// 	});
		// 	this.selectSku(0, 0)
		// },
		// selectSku(sIndex, index) {
		// 	this.idlist = [];
		// 	//购物车逻辑
		// 	this.mySpecifications[sIndex].attr_list.forEach((items, idx) => {
		// 		if (idx === index) {
		// 			this.$set(items, 'selected', true);
		// 		} else {
		// 			this.$set(items, 'selected', false);
		// 		}
		// 	});
		// 	var guige = [];
		// 	this.mySpecifications.forEach((item2, idx2) => {
		// 		item2.attr_list.forEach((item3, idx3) => {
		// 			if (item3.selected === true) {
		// 				guige.push(item3);
		// 				this.idlist.push(item3.attr_id);
		// 			}
		// 		});
		// 	});
		// 	var idlist2 = this.idlist.toString();
		// 	this.minlist.prize_list.attr.forEach((itm, ids) => {
		// 		if (idlist2 == itm.combination) {
		// 			this.chajia = itm.chajia
		// 		}
		// 	});
		// },
		goseleCoupon(){
			this.$refs.couponref.open()
		},
		valChange(e) {
			this.minlist.pay_price = Number(this.minlist.goods.price) * Number(e.value)
		},
		zfClick(zfck){
			this.zfck = zfck
		},
		//点确定
		submits(){
			this.show = false;
		},
		arrData() {
			let data = {
				order_id: this.order_id
			};
			this.$Request.post(this.$api.order.sendPreview, data).then(res => {
				this.minlist = res.data;
				this.cityList = res.data.address;
			});
		},
		//提交订单
		uploadorder() {
			if(this.checkStatus==false){
				uni.showToast({
					title:"请先勾选阅读并同意用户协议",
					icon:"none"
				})
				return
			}
			if(this.cityList==null){
				uni.showToast({
					title:"请选择收获地址",
					icon:"none"
				})
				return
			}
			let data = {
				order_id:this.order_id,
				address_id: this.cityList.address_id,
				combination:this.idlist.toString(),
				pay_type:this.zfck,
			};
			if(this.create_order_id > 0 ){
				this.getPayData(this.create_order_id);
				return;
			}
			this.$Request.post(this.$api.order.sendOrderSubmit, data).then(res => {
				////console.log('123321')
				this.create_order_id  = res.data.order_id
				if(res.data.status==1){
					//已支付
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					setTimeout(()=>{
						uni.redirectTo({
							url: '/userPage/user/fahuoOrder/fahuoOrder'
						})
					},800)
					 clearTimeout();
					return
				}
				this.getPayData(this.create_order_id);
			});
		},
		getPayData(order_id){
			let data = {
				order_id:order_id,
				pay_type:this.zfck,
			};
			this.$Request.get(this.$api.order.sendPayData, data).then(res => {
				if(res.data.status==0){
					//调用微信或者支付宝
					// this.payurl = res.data.pay_data
					// this.order_id = res.data.order_id
					// if(this.zfck==4){
					// 	this.urlpayStatus = true;
					// 	this.getjieguodingshi = setInterval(()=>{
					// 		this.getjieguo()
					// 	},3000)
					// 	return
					// }
					this.Payment(res.data.pay_data)
				}else if(res.data.status==1){
					//已支付
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					setTimeout(()=>{
						uni.redirectTo({
							url: '/userPage/user/fahuoOrder/fahuoOrder'
						})
					},800)
					 clearTimeout();
				}
			});
		},
		Payment(pay_data){
			let provider = ''
			if(this.zfck==1){
				provider = 'wxpay'
			}else{
				provider = 'alipay'
			}
			////console.log("这里")
			//调用支付
			uni.requestPayment({
				provider: provider,
				orderInfo: pay_data,
				success() {
					uni.showToast({
						title:"支付成功",
						icon:"none"
					})
					setTimeout(()=>{
						uni.redirectTo({
							url: '/userPage/user/fahuoOrder/fahuoOrder'
						})
					},800)
					 clearTimeout();
				},
				fail(res) {
					////console.log(res);
				}
			});
		},
		//选择收货地址
		diycity() {
			uni.navigateTo({
				url: '/userPage/user/address/address?type=1'
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		shouhuo() {
			uni.navigateTo({
				url: '/pages/live/liveshop/tuikuan'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.guige_top{
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		.title{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.guige_list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 20rpx 20rpx 0 0rpx;
			view{
				width: 180rpx;
				height: 62rpx;
				background: #FFFFFF;
				border: 1px solid #707070;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-right: 20rpx;
			}
		}
	}
	.check_list{
		width: 180rpx;
		height: 62rpx;
		background: #6792DD !important;
		border: 0 !important;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}
	
	.tuikuan{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #FFFFFF;
	}
	.order-mation3 {
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding: 20rpx;
		width: 750rpx;
		background: #ffffff;
		// border-radius: 20rpx;
		.om-top {
			display: flex;
			justify-content: space-between;
			text:nth-of-type(1) {
				font-size: 34rpx;
				color: #333333;
				font-weight: 600;
			}
			text:nth-of-type(2) {
				font-size: 30rpx;
				color: #333333;
			}
		}
		.order-con {
			display: flex;
			flex-direction: column;
			justify-content: center;
			view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				view {
					margin-top: 28rpx;
					text {
						margin-left: 18rpx;
					}
				}
			}
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.check{
		width: 40rpx;
		height: 40rpx;
	}
	.mode {
		padding: 0 20rpx;
		width: 100%;
		box-shadow: 0 3rpx 6rpx rgba(13, 107, 107, 0.16);
		margin: 0 auto;
		margin-top: 20rpx;
		background: #FFFFFF;
	
		.txt {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 102rpx;
		}
	
		.wx {
			display: flex;
			.img {
				width: 48rpx;
				height: 48rpx;
				margin-top: 30rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.txt {
				flex: 1;
				font-size: 26rpx;
	
			}
	
			.xuanzhong {
				width: 44rpx;
				height: 44rpx;
				margin-top: 30rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

.zongjia {
	font-size: 32rpx;
	color: #333333;
	margin-left: 20rpx;
}
.odpon {
	width: 370rpx;
	height: 88rpx;
	background: #27438B;
	opacity: 1;
	color: white;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
}
.tab_xieyi{
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx 0rpx 20rpx;
	image{
		width: 40rpx;
		height: 40rpx;
	}
	view{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		padding-left: 20rpx;
	}
}
.shuoming{
	padding: 20rpx;
	box-sizing: border-box;
}
.btns {
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #F5F5F5;
}
.order {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 100rpx;
	.order-status {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: -65rpx;

		&-top {
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 23rpx;
		}

		&-cent {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #999;
			margin-top: 4rpx;
		}

		&-bot {
			margin-top: 18rpx;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #333;

			text {
				border: 1px solid #707070;
				display: block;
				padding: 2rpx 20rpx;
				border-radius: 100rpx;
				margin: 0 10rpx 30rpx;
			}
		}
	}

	.order-info {
		margin: 0 auto;
		margin-top: 14rpx;
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		view {
			text {
				display: block;

				&:nth-child(1) {
					font-size: 30rpx;
					color: #333333;
				}

				&:nth-child(2) {
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		image {
			width: 12rpx;
			height: 23rpx;
		}
	}

	.order-store {
		margin: 0 auto;
		margin-top: 20rpx;
		width: 100%;
		background: #ffffff;

		&-top {
			padding: 20rpx 20rpx 0;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #333;
				display: block;
			}

			image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 23rpx;
				display: block;
			}
		}

		&-cent {
			padding: 20rpx 20rpx 0;
			border-top: 1px solid #e3e3e3;
			margin-top: 12rpx;

			.order-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				color: #333333;
				&-left {
					display: flex;
					align-items: center;

					image {
						width: 202rpx;
						height: 202rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					view {
						width: 450rpx;
						.order_gige{
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							text{
								color: #333333;
								font-size: 28rpx;
							}
						}
						.ordertext1 {
							color: #333333;
							font-size: 28rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.guigecss {
							display: flex;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text {
								color: #333333;
								font-size: 28rpx;
							}
						}
						.ordertext2 {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 20rpx;
							.left{
								color: #fb4f40;
								font-size: 32rpx;
							}
							.right{
								width: 40%;
							}
						}
						.ordertext3{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
							text-decoration:line-through;
						}
					}
				}

				&-right {
					font-size: 28rpx;
					color: #333;
				}
			}

			.order-num {
				margin: 0 auto;
				width: 618rpx;
				height: 56rpx;
				background: #f8f8f8;
				border-radius: 100rpx;
				font-size: 30rpx;
				color: #999;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 25rpx;
					height: 16rpx;
					margin-left: 20rpx;
				}
			}

			.order-cost {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				color: #333;
				padding: 10rpx 0;
			}
		}

		.order-money {
			padding: 20rpx;
			border-top: 1px solid #e3e3e3;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 28rpx;
			color: #999;

			view {
				&:nth-child(2) {
					font-size: 30rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
		}
	}
	.order-mationyun {
		margin: 0 auto;
		padding: 20rpx;
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: space-between;

		> text {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			padding-right: 40rpx;
		}
	}
	.wenxin{
		padding: 20rpx;
		width: 100%;
		background: #ffffff;
	}
	.order-mation_remack{
		margin: 0 auto;
		padding: 20rpx;
		width: 100vw;
		background: #ffffff;
		display: flex;
		align-items: center;
		> text {
			font-size: 30rpx;
			color: #333333;
		}
		> input {
			width: 611rpx;
			height: 92rpx;
			background: #F8F8F8;
			opacity: 1;
			border-radius: 10rpx;
			background: #F8F8F8;
			opacity: 1;
			padding-left: 20rpx;
			margin-left: 20rpx;
		}
		.address {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			align-items: center;
			view {
				text {
					display: block;
					margin-left: 20rpx;
				}
			}
			
		}
	}
	.order-mation_address {
		margin: 0 auto;
		padding-right: 20rpx;
		width: 100vw;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding:20rpx;
		box-sizing: border-box;
		.dingwei{
			width: 45rpx;
			height: 55rpx;
		}
		> text {
			font-size: 30rpx;
			color: #333333;
		}
		
		
		> input {
			width: 611rpx;
			height: 92rpx;
			background: #F8F8F8;
			opacity: 1;
			border-radius: 10rpx;
			background: #F8F8F8;
			opacity: 1;
			padding-left: 20rpx;
			margin-left: 20rpx;
		}
		.address {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			align-items: center;
			.address_left {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
				.address_text{
					text {
						display: block;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
</style>
